<!-- vue文件的三种标签 
    template: 编写html代码
    script:   编写TS或JS代码
    style:    编写样式代码
 -->

<template>
  <!-- ref用在DOM标签上，获取的是DOM节点。用在组件标签上，获取的是组件的实例对象 -->

  <!-- 这里起了一个和Person中同名的ref标签名 -->
  <h2 ref="h2">测试</h2>
  <button @click="printH2">点我打印H2标签</button>

  <hr>
  <button @click="printPerson">测试</button>
  <Person ref="ren"/>

  
</template>

<script lang="ts" setup>
    import Person from './components/Person.vue'
    import {ref} from 'vue'

    // 这里的逻辑和Preson.vue中的逻辑相同(验证是否相互干扰)
    let h2 = ref()
    function printH2() {
        console.log(h2.value)
    }  

    let ren = ref()
    function printPerson() {
        console.log(ren.value)
    }  
</script>
